
<template>
  <router-view v-slot="{ Component}">
      <keep-alive :include="includeList">
        <component v-if="route.meta.keepAlive" :is="Component" :key="route.name"/>
      </keep-alive>
      <component v-if="!route.meta.keepAlive" :is="Component" :key="route.name"/>
  </router-view>   
</template>
<script setup lang="js">
  import {useRoute} from "vue-router";
  import {reactive} from "vue";
  import {router} from "./router/router";
  const route = useRoute()
  let includeList = reactive([]);
  let routes = router.options.routes;
  //初始化 就遍历所有路由 把对应的keepAlive规则放到includeList当中
  routes.forEach(item=>{
    if(item.meta?.keepAlive){
      includeList.push(item.name);
    }
  })

</script>
<style lang="less" scoped>

@import url("./views/common/common.less");
.link{
 display:inline-block;
 background:#e54d42;
 border-radius: 20px;
 padding: 20px;
 margin-right: 20px;
 width: 200px;
 color: #fff;
 CURSOR: url(./assets/logo.png);
 text-decoration: none;
}
.active-link{
  color: yellowgreen;
}
</style>
